<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const standLen = 3
const stands = ref([{
  desc: ''
}])
const elementLen = 30
const elements = ref([{
  one: '',
  two: '',
  three: ''
}])
const impactLen = 2
const impacts = ref([])
// ----
const form = reactive({
  storeGoodsId: 0,
  storeGoodsText: '',
  yield: '',
  tensile: '',
  elongation: '',
  xray: '',
  hardness: '',
  hydrogen: '',
  ferrite: '',
  fields_1: '',
  fields_2: '',
  tfillet_weld: '',
  description: ''
})

/* ---- */
const pickerStoreGoods = ref()
const layer = ref()
const layerLoading = ref()

/* ---- */
const getFormInfo = async () => {
  // --产品详情--
  if (proxy.$route.query.id) {
    await proxy.$http.get('material-book/index', {
      params: { 'MaterialBookSearch[id]': proxy.$route.query.id }
    }).then((res) => {
      const MData = res.items[0] || {}
      // ----
      form.storeGoodsId = MData.product_id
      // ----
      proxy.$Myfun.getJsonData(MData.standard, (resJson) => {
        stands.value = resJson
      })
      proxy.$Myfun.getJsonData(MData.chemical_element, (resJson) => {
        elements.value = resJson
      })
      proxy.$Myfun.getJsonData(MData.impact_test, (resJson) => {
        impacts.value = resJson
      })
      // ----
      form.yield = MData.yield_strength
      form.tensile = MData.tensile_strength
      form.elongation = MData.elongation_a
      form.xray = MData.x_ray_inspection
      form.hardness = MData.hardness_test
      form.hydrogen = MData.dhc
      form.ferrite = MData.ferrite_content
      form.fields_1 = MData.fields_1
      form.fields_2 = MData.fields_2
      form.tfillet_weld = MData.tfillet_weld
      form.description = MData.description
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
  // --门店商品信息--
  if (Number(form.storeGoodsId) > 0) {
    await proxy.$http.get('proc/index', {
      params: { 'ProductSearch[id]': form.storeGoodsId }
    }).then((res) => {
      const GData = res.items[0] || {}
      form.storeGoodsText = proxy.$Myfun.setText(GData.name)
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
}
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
  // ----
  form.storeGoodsId = 0
}
// ----
const getAuditFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      const options = {
        type: 1,
        button: ['取消', 'forSch', '确定'],
        info: {
          type: 'get',
          url: 'proc/index',
          data: {
            params: {
              'ProductSearch[dealer_id]': logUser.id,
              // --是否下架商品--
              'ProductSearch[is_shelf]': 0,
              // --是否云仓商品--
              'ProductSearch[is_store]': 0,
              // ----
              sort: 'SORT_ASC'
            }
          },
          key: ['id', 'name']
        },
        noData: '没有找到我的门店商品',
        schKey: 'ProductSearch[name]',
        filter: {
          show: true,
          msg: '该门店商品已被选为材质书产品',
          type: 'get',
          url: 'material-book/index',
          data: {
            params: {
              'MaterialBookSearch[mb_dealer_id]': logUser.id
            }
          },
          key: 'MaterialBookSearch[product_id]'
        },
        yes: (result) => {
          const RJData = result[0] || {}
          form.storeGoodsText = RJData.text
          form.storeGoodsId = RJData.value
        }
      }
      proxy.$Myfun.isIndepth(pickerStoreGoods.value, 'open', options)
      break
    }
    case 2: {
      if (Number(item) > 0) { stands.value.splice(item, 1) } else if (Number(stands.value.length) < standLen) {
        stands.value.push({
          desc: ''
        })
      }
      break
    }
    case 3: {
      if (Number(item) > 0) { elements.value.splice(item, 1) } else if (Number(elements.value.length) < elementLen) {
        elements.value.push({
          one: '',
          two: '',
          three: ''
        })
      }
      break
    }
    case 4: {
      if (Number(item) >= 0) { impacts.value.splice(item, 1) } else if (Number(impacts.value.length) < impactLen) {
        impacts.value.push({
          one: '',
          two: ''
        })
      }
      break
    }
  }
}
// ----
const subform = async () => {
  if (Number(form.storeGoodsText.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '请选择我的门店产品！')
    return false
  }
  for (let i = 0; i < elements.value.length; i++) {
    if (Number(elements.value[i].one.length) === 0) {
      proxy.$Myfun.forToast(layer.value, 'open', '请填写化学元素的成分！')
      return false
    }
  }
  // ----
  const forStands = JSON.stringify(stands.value)
  const forElements = JSON.stringify(elements.value)
  const forImpacts = JSON.stringify(impacts.value)
  // ----
  let forType = 'post'
  let forUrl = 'material-book/create'
  let forData = {
    mb_dealer_id: logUser.id || undefined,
    // ----
    product_id: form.storeGoodsId,
    standard: forStands,
    chemical_element: forElements,
    yield_strength: form.yield,
    tensile_strength: form.tensile,
    elongation_a: form.elongation,
    impact_test: forImpacts,
    x_ray_inspection: form.xray,
    hardness_test: form.hardness,
    dhc: form.hydrogen,
    ferrite_content: form.ferrite,
    fields_1: form.fields_1,
    fields_2: form.fields_2,
    tfillet_weld: form.tfillet_weld,
    description: form.description,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }
  if (proxy.$route.query.id) {
    forType = 'patch'
    forUrl = 'material-book/update?id=' + proxy.$route.query.id
    forData = {
      product_id: form.storeGoodsId,
      standard: forStands,
      chemical_element: forElements,
      yield_strength: form.yield,
      tensile_strength: form.tensile,
      elongation_a: form.elongation,
      impact_test: forImpacts,
      x_ray_inspection: form.xray,
      hardness_test: form.hardness,
      dhc: form.hydrogen,
      ferrite_content: form.ferrite,
      fields_1: form.fields_1,
      fields_2: form.fields_2,
      tfillet_weld: form.tfillet_weld,
      description: form.description,
      // ----
      config_id: userInfo.config_id,
      openid: userInfo.openid
    }
  }
  // ----
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  let resData = ''
  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  proxy.$Myfun.onLoading(layerLoading.value, 'close')
  if (resData) proxy.$router.back()
}
const goback = () => { proxy.$router.back() }

/* ---- */
onMounted(() => {
  getFormInfo()
})
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <div class="formSet">
      <ul>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>选择产品</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="请选择我的门店产品" v-model.trim="form.storeGoodsText" @click="getAuditFun(1)" readonly unselectable="on" onfocus="this.blur()"/></p>
            <span class="fa fa-caret-down xw-color-16"></span>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.storeGoodsText"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-grade xw-radius-3">
            <h1>执行标准</h1>
            <div class="FGE-con xw-flex xw-flex-align" v-for="(item, index) in stands">
              <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="item.desc"/></p>
              <span class="FPE-btn fa fa-plus-square xw-color-12 xw-act" @click="getAuditFun(2)" v-if="Number(index) === 0"></span>
              <span class="FPE-btn fa fa-minus-square xw-color-13 xw-act" @click="getAuditFun(2, index)" v-else></span>
            </div>
          </div>
        </li>
        <li>
          <div class="form-grade xw-radius-3">
            <h1>化学元素</h1>
            <div class="FGE-info xw-flex xw-flex-align" v-for="(item, index) in elements">
              <p class="xw-radius-3 xw-flex-W1"><input class="text" type="text" placeholder="成分" v-model.trim="item.one"/></p>
              <em></em>
              <p class="xw-radius-3 xw-flex-W1"><input class="text" type="text" placeholder="标准值" v-model.trim="item.two"/></p>
              <em></em>
              <p class="xw-radius-3 xw-flex-W1"><input class="text" type="text" placeholder="实测值" v-model.trim="item.three"/></p>
              <span class="FPE-btn fa fa-plus-square xw-color-12 xw-act" @click="getAuditFun(3)" v-if="Number(index) === 0"></span>
              <span class="FPE-btn fa fa-minus-square xw-color-13 xw-act" @click="getAuditFun(3, index)" v-else></span>
            </div>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>屈服强度</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.yield"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.yield"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>抗拉强度</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.tensile"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.tensile"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>延伸率A</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.elongation"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.elongation"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-grade xw-radius-3">
            <div class="xw-flex xw-flex-align xw-flex-justify">
              <h1>冲击实验</h1>
              <span class="FPE-btn fa fa-plus-square xw-color-12 xw-act" @click="getAuditFun(4)"></span>
            </div>
            <div class="FGE-item xw-flex xw-flex-align" v-for="(item, index) in impacts">
              <em class="xw-color-13">温度</em>
              <p class="xw-radius-3 xw-flex-W1"><input class="text" type="text" v-model.trim="item.one"/></p>
              <em class="FGE-fg xw-color-13">冲击功</em>
              <p class="xw-radius-3 xw-flex-W1"><input class="text" type="text" v-model.trim="item.two"/></p>
              <span class="FPE-btn fa fa-minus-square xw-color-13 xw-act" @click="getAuditFun(4, index)"></span>
            </div>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>X射线探伤</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.xray"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.xray"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>硬度试验</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.hardness"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.hardness"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>扩散氢含量</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.hydrogen"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.hydrogen"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>铁素体含量</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.ferrite"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.ferrite"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>晶间腐蚀试验</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.fields_1"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.fields_1"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>纵向弯曲</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.fields_2"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.fields_2"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>T型接头角焊缝</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.tfillet_weld"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.tfillet_weld"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-are xw-radius-3">
            <h1>用途说明</h1>
            <p><textarea class="tarea-H4" placeholder="" v-model.trim="form.description"></textarea></p>
          </div>
        </li>
      </ul>
      <div class="form-sub xw-radius-3 xw-bgCL-11 xw-act" @click="subform">确定提交</div>
      <div class="form-sub xw-radius-3 xw-WhiteRed xw-act" @click="goback">取消返回</div>
    </div>
    <pickermore-view ref="pickerStoreGoods"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>